import React from 'react'
import {SwipeableFlatList, View, Text, StyleSheet,TouchableHighlight,Alert,} from 'react-native'

export default class SwFlatListPage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            refresh: false,
            listData: []
        }
    }

    getNewData() {
        this.setState({
            refresh: true
        })
        let newData = []
        for (let i = 0; i < 2; i++) {
            newData.push('new data')
        }
        setTimeout(() => {
            this.setState({
                refresh: false,
                listData: [...newData, ...this.state.listData]
            })
        }, 1500)
    }

    componentDidMount() {
        this.getData()
    }

    getData() {
        let newData = []
        for (let i = this.state.listData.length; i < this.state.listData.length + 5; i++) {
            newData.push(i)
        }
        setTimeout(() => {
            this.setState({
                listData: [...this.state.listData, ...newData]
            })
        }, 1500)
    }

     _renderQuickActions({item}) {
        return (
          <View style={style.actionsContainer}>
            <TouchableHighlight
              style={style.actionButton}
              onPress={() => {
                Alert.alert('确认删除' );
              }}>
              <Text style={style.actionButtonText}>{'删除'}</Text>
            </TouchableHighlight>
          </View>
        )
    }

    render() {
        return (
            <View>
                <SwipeableFlatList
                    // 渲染的数据源 8
                    data={this.state.listData}

                    renderItem={(data) => {
                        return <Text style={style.item}>{data.item}</Text>
                    }}

                    // 下拉刷新数据
                    refreshing={this.state.refresh}
                    onRefresh={() => {
                        this.getNewData()
                    }}

                    // 上拉加载更多数据
                    onEndReachedThreshold={.3}
                    onEndReached={() => {
                        this.getData()
                    }}

                    ListEmptyComponent={<Text style={style.tipComponent}>暂无数据</Text>}
                    ListFooterComponent={<Text style={style.tipComponent}>获取更多数据</Text>}
                    // 列表key值
                    keyExtractor={(item, index) => index}
                    progressViewOffset={100}
                    renderQuickActions={(data) =>
//                        console.warn(data)
//                        return <View style={style.btnWrap}>
//                            <Text style={style.btn}>删除</Text>
//                        </View>
                        this._renderQuickActions(data)

                    }
                    // 最大滑动距离
                    maxSwipeDistance={80}
                />
            </View>
        )
    }
}

const style = StyleSheet.create({
    item: {
        backgroundColor: "green",
        marginBottom: 10,
        height: 150,
        lineHeight: 150,
        textAlign: "center"
    },
    btnWrap: {
        backgroundColor: "red", alignItems: "flex-end", height: 150, lineHeight: 150
    },
    btn: {
        width: 90, textAlign: "center", lineHeight: 150
    },
    tipComponent:{
        textAlign: "center", marginBottom: 10
    },
 actionsContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  actionButton: {
    padding: 10,
    width: 80,
    backgroundColor: '#999999',
  },
  actionButtonDestructive: {
    backgroundColor: '#FF0000',
  },
  actionButtonText: {
    textAlign: 'center',
  }

})